<template>
  <h1>sss</h1>
  <hr />
  <h6>{{ childMsg }}</h6>
  <button @click="changeMsg">childre click</button>

  <hr />
  <h6>{{ count }}</h6>
  <button @click="onAddCount">Add count</button>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, onUpdated } from "vue";
// 导入ref
import { ref, computed } from "vue";
export default defineComponent({
  name: "childRen",
  // 接受父组件传递的值
  props: ["msg"],
  // 注册 emits 父组件的自定义事件
  emits: ["onParentMsg"],
  // 组合式API入口
  // setup 接受两个参数 ，第一个参数，props 第二个参数 {emit,....}
  setup(props, { emit }) {
    console.log("setup children");

    const childMsg = computed(() => props.msg + "😒");
    const changeMsg = () => {
      emit("onParentMsg", { msg: "ddddddd" });
    };
    // 定义一个定时器
    let timer: any = null;
    // 组件挂在之后开启定时器
    onMounted(() => {
      timer = setInterval(() => {
        console.log("timer...");
      }, 3000);
    });

    //组件卸载之后关闭定时器
    onUnmounted(() => {
      clearInterval(timer);
    });

    // 定义count
    const count = ref(0);
    const onAddCount = () => {
      count.value = count.value + 1;
    };
    // 组件更新之后输出 onUpdated
    onUpdated(() => {
      console.log("onUpdated");
    });
    // 返回值
    return { childMsg, changeMsg, count, onAddCount };
  },
  components: {},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
